<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="../../element/index.css" rel="stylesheet" />
		<script src="../../js/vue.js"></script>
		<script src="../../element/index.js"></script>
		<script src="../../js/axios.js"></script>
		<script src="../../js/gsaucommon.js"></script>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}

			body {
				height: 100%;
			}

			html {
				height: 100%;
			}
			/* 大盒子 */
			#addtableone {
			
				width: 1200px;
		/* 		box-shadow: 20px; */
				background-color: white;
				margin: 0 auto;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				margin-top: 20px;
			}
			#header{
				top:0px;
				background-color: white;
				position: sticky;
				z-index: 5;
			}
			#header #left{
				height: 80px;
				line-height: 80px;
				text-indent: 12px;
		
			}
			#header #right{
				height: 80px;
				
				line-height: 80px;
				/* font-size: 32px;
				font-weight: bold; */
				text-align: right;

			}
			#hr1{
				
				/* width:98%;
				margin: 0 auto; */
				color: whitesmoke;
				margin-bottom: 30px;
				
			}
		</style>
	</head>
	<body>
		<div id="addtableone">
			<el-row id="header">
			  <el-col :span="12"><div class="grid-content bg-purple" id="left">
			  <h3>获奖管理</h3>
			  </div></el-col>
			  <el-col :span="12"><div class="grid-content bg-purple-light" id="right" style=" padding-right: 80px;">
			  <el-button type="primary" @click="fanhui()">
				  返回
			  </el-button>
			  </div></el-col>
			  <hr id="hr1"/>
			</el-row>
			
			<el-row style="padding-left: 40px;">
				<el-form  :model="form"  :rules="rules"  ref="ruleform" label-width="80px" class="demo-ruleForm" name>
					<el-form-item label="填报人" style="width: 200px">
						<el-input v-model="form.tianbaoName" readonly></el-input>
					</el-form-item>
					
					<el-row>
						<el-col :span="8" >
							<el-form-item label="项目名称" style="width: 300px;" prop="xiangmuName">
								<el-input placeholder="请输入内容" v-model="form.xiangmuName" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8" >
							<el-form-item label="奖项名称" style="width: 300px;" prop="huojiangName">
								<el-input placeholder="请输入内容" v-model="form.huojiangName" clearable></el-input>
							</el-form-item>
						</el-col>
						
						<el-col :span="8" >
							<el-form-item label="获奖级别" style="width: 300px;">
								<el-select v-model="form.huojiangJibie"  placeholder="请选择获奖级别">
									<el-option v-for="(item,index) in huojiangjibie" :value="item.name" :key ="item.id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					
					<el-row>
						<el-col :span="8" >
							<el-form-item label="得分" style="width: 200px" prop="deFen" >
								<el-input v-model.number="form.deFen"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8" >
							<el-form-item label="获奖等级" style="width: 300px;">
								<el-select v-model="form.huojiangDengji"  placeholder="请选择获奖级别">
									<el-option v-for="(item,index) in huojiangdengji" :value="item.name" :key ="item.id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="总人数" style="width:200px" prop="zongRenShu">
								<el-input v-model.number="form.zongRenShu"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					
					<el-row>
						<el-col :span="8">
							<el-form-item label="本人排名" style="width:200px" prop="meSort">
								<el-input v-model.number="form.meSort"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item label="证明材料" style="width: 100%;" >
						<el-upload class="upload-demo" 
							drag 
							multiple
							action="http://localhost:8080/huojiang/upload"
							style="width: 50%;"
							:on-error="updateError"
							:on-success="uploadSuccess"
							:on-remove="handerRemove"
							:before-remove="beforeRemove"
							:before-upload="beforeUpload"
							:file-list="fileList"
							:auto-upload="true" 
							:on-exceed="handleExceed" 
							accept=".pdf,.jpg,.png,.txt,.docx">
							<i class="el-icon-upload" ></i>
							<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
							<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
						</el-upload>
					</el-form-item>
				
					<el-form-item label="备注">
						<el-input type="textarea" v-model="form.memo"></el-input>
					</el-form-item>

					  <!--  提交栏 -->
					<el-form-item>
						<el-button type="primary" @click="onsubmit('ruleform')">添加信息</el-button>
						<el-button type="primary"  @click="resetForm('ruleform')">重置</el-button>
					</el-form-item>
				</el-form>
			</el-row>

		</div>
	</body>
</html>
<script type="text/javascript">
	new Vue({
		el: '#addtableone',
		data: {
			flag:"",
			huojiangjibie:["省级","县级","其他"],
			huojiangdengji:["一等奖","二等奖"],
			loading:false,
			lastuploadfile:'',
			fileMapprings:[],
			fileList:[],
			form: {
				tianbaoName:'刘茂兵',
				xiangmuName: '',
				huojiangName: '',
				huojiangJibie:'',
				deFen:'',
				huojiangDengji:'',
				zongRenShu:'',
				meSort:'',
				createBy:'',		
				createTime:"",
				memo:'',
				fileList: [],			
			},
			
			rules: {
				name: [
					{ required: true, message: '请输入填报人', trigger: 'blur' },
					{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }						
				],
				xiangmuName: [
					{ required: true, message: '请选择登记表类别', trigger: 'blur' },
					{ min: 1,  message: '至少输入一个个字符', trigger: 'blur' }
				],
				huojiangName:[
					{ required: true, message: '请选择登记表级别', trigger: 'blur' },
					{ min: 1,  message: '至少输入一个个字符', trigger: 'blur' }
				],
				deFen:[ 
					{ required: 'true', message: '必须填写', trigger: 'blur'},
					{ type: 'number', message: '得分必须为数字值', trigger: 'blur'},
				],
				zongRenShu:[
					{ required: 'true', message: '必须填写', trigger: 'blur'},
					{ type: 'number', message: '人数必须为数字值', trigger: 'blur'},
				],
				meSort:[
					{ required: 'true', message: '必须填写', trigger: 'blur'},
					{ type: 'number', message: '人数必须为数字值', trigger: 'blur'},
				],
			}
		},

		methods: {
			findDengJi(){
				axios.get(window.gsau+"huojiangdengji/findall").then((res)=>{
					console.log(res)
					this.huojiangdengji=res.data.data
					console.log(this.huojiangdengji)
					
				})
			},
			
			findJiBie(){
				axios.get(window.gsau+"huojiangjibie/findall").then((res)=>{
					this.huojiangjibie=res.data.data
					console.log(this.huojiangjibie)
				})
			},
			
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			
			fanhui(){
				window.location="list.html"
			},
			
			onsubmit(ruleform) {
				this.$refs[ruleform].validate((valid)=>{
					if(valid){
						this.$confirm("确认添加吗","提示信息",{
							confirmButtonText:"确定",
							cancelButtonText:"取消",
							type:"warning",
							center:true
						}).then(()=>{
								axios.post(window.gsau+"huojiang/addinfo",this.form).then((res)=>{
								console.log(res)
								if(res.data.code=="10010"){
									this.$alert("添加成功")
									window.location="list.html"
								}else{
									this.$alert("添加失败，请重试")
								}
							})
						}).catch(()=>{
							this.$message({
								type:"info",
								message:"取消添加"
							})
						})					
					}else{
						console.log("error sunmit");
						return false;
					}
				});
			},
			
			handleExceed(files, fileList){
				this.$message.warning(
					`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			},
			
			beforeUpload(file){
				const is10M = file.size / 1024 /1024 <10;
				if(!is10M){
					this.$message.error("上传文件大小不能超过10MB!")
				}
			},
			
			uploadSuccess(response, file, fileList){
				console.log("11111111111")
				// console.log(file)
				// console.log(response)
				// console.log(fileList)
				this.loading = false
				if(response.code=="10010"){
					//this.form.fileList.push(response.data.newName)
					this.lastuploadfile=response.data.olderName
					let filename = {
						oldFileName:"",
						newFileName:""
					}
					filename.newFileName = response.data.newfilename
					filename.oldFileName = response.data.oldfilename
					this.fileMapprings.push(filename)
					this.form.fileList.push(filename)
					console.log(this.form.fileList)
					this.$message.success(file.name+"文件上传成功")
				}else{
					this.$message.error(file.name+"文件上传失败，请重新上传")
					//删除列表中失败文件
					let index = 0
					for(const i in fileList){
						if(fileList[i]==file){
							index=i;
							break;
						}
					}
					fileList.splice(index,1)
					//this.$refs.uploadFile.clearFiles();
				}
			},
			
			updateError(err, file, fileList) {
				// console.log(err)
				// console.log(file)
				// console.log(fileList)
				this.$message.error(file.name+"文件上传失败，请重新上传")
				//删除列表中失败文件
				let index = 0
				for(const i in fileList){
					if(fileList[i]==file){
						index=i;
						break;
					}
				}
				fileList.splice(index,1)
				//this.$refs.uploadFile.clearFiles();
			},
			
			beforeRemove(file, fileList){
				//console.log(this.form.fileList)
				let index=""
				for(const i in fileList){
					if(fileList[i] == file){
						index = file.name
						break
					}
				}
				for(const i in this.fileMapprings){
					if(this.fileMapprings[i].oldFileName==index){
						index = this.fileMapprings[i].newFileName
						break
					}
				}
				for(const i in this.form.fileList){
					if(this.form.fileList[i]==index){
						this.form.fileList.splice(i,1)
						break
					}
				}
			},
			
			handerRemove(){
				console.log(this.form.fileList)
			}
		},
		
		created() {
			this.findDengJi()
			this.findJiBie()
		},
	})
</script>
